// ①导入操作token的js
import { getToken, setToken, removeToken } from '@/utils/auth'
import { login, getUserInfo, getUserDetailById } from '@/api/user'
// import { Message } from 'element-ui'
const state = {
  // ②设置token
  // 这么做的目的是将来做免登录
  token: getToken(), // getToken如果没有token,获取到的是null
  userInfo: null // 存储用户的基本信息, 将来很多接口会用到
}
const mutations = {
  // ③设置存储token的方法
  // 第一次登录要存token
  SET_TOKEN(state, token) {
    state.token = token // 给vuex存
    setToken(token) // 给cookie存
  },
  // ④删除token的方法
  // 退出需要删除token
  REMOVE_TOKEN(state) {
    state.token = null // 给vuex清空
    removeToken() // 给cookie清空
  },
  // 定义修改用户信息的方法
  SET_USERINFO(state, info) {
    state.userInfo = info
    // state.userInfo = { ...info }
  },
  // 定义删除用户信息的方法  将来退出登录要删除
  REMOVE_USERINFO(state) {
    state.userInfo = null
  }
  // 思考: 为什么用户信息不存cookie?
  // 复习: 什么情况下修改数组和对象的值不会造成页面的自动渲染? 如何解决?

}
// 发登录请求, 获取token,存token
const actions = {
  // ①定义一个登录请求的方法  context是一个对象, 可以调用context.commit()  context.dispatch()
  // data代表登录页的loginForm对象
  async login({ commit }, data) {
    // try {
    // ②导入这个api/user.js的login方法
    const res = await login(data)
    // axios拿到的返回值, 真正的结果是保存在 res = {data: {success: true, code: 1000, ....}}
    // if (res.data.success) {
    // ③触发mutations中的修改token的方法
    commit('SET_TOKEN', res)
    // } else {
    //   // 弹错误信息的框
    //   Message.error(res.data.message)
    // }
    // } catch (err) {
    // catch捕获的就是network红色错误
    // err拿到的是网络错误信息对象, 里面也有一个浏览器给我们的属性message
    // Message.error(err.message)

    // 写一点其他的业务逻辑
    // console.log(err)
    // }
  },
  // 定义获取用户信息的方法
  async getUserInfo({ commit }) {
    const data = await getUserInfo()
    const res = await getUserDetailById(data.userId)
    // 在这发请求获取员工基本信息
    commit('SET_USERINFO', { ...data, ...res })
  }
}

export default {
  namespaced: true,
  // 这种写法耦合性强
  // state: {},
  // mutations: {},
  // actions: {}

  // 这种写法叫解耦
  state,
  mutations,
  actions
}

// const fn = 1
// const obj = {
//   actions: {
//     fn: function() {
//       console.log(fn)
//       console.log(obj.actions.fn)
//     }
//   }
// }
// obj.actions.fn()
